<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0; font-family:Sans-serif; font-size:10px }
      #map_canvas { height: 100% }
      #refresh { position: absolute; left: 50px; bottom: 10px; font-size: 200%; color: #FF3300 }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="http://sprintf.googlecode.com/files/sprintf-0.7-beta1.js"></script>
    <script type="text/javascript">
    
    var runners = {};
    var map;
    
    function fetchRunners() {
	    $(refresh).show();
    	$.ajax({
                url: 'https://api.deveryware.net/deveryrest/api/v1/mobile/all',
                type: 'GET',
                dataType: "json",
				contentType: "application/json",
                success: function(data) {
                	var info = new google.maps.InfoWindow();
                	for(i=0;i<data.mobileExtendedBeanList.length;i++) {
                		var device = data.mobileExtendedBeanList[i];
                		var name = device.mobile.comment;
                		var now = new Date();
                		
                		if(device.container != null && device.container.position != null) {
                			var latitude = device.container.position.latitude;
                			var longitude = device.container.position.longitude;
                			var time = device.container.position.date;
                			var uptime = (now.getTime() - (now.getTimezoneOffset() /* offset min */ * 60 * 1000 /* ms */)) - time;
                			var day = uptime / (60000 * 60 * 24);
                			var hour = (uptime % (60000 * 60 * 24)) / (60000 * 60);
                			var min = ((uptime % (60000 * 60 * 24)) % (60000 * 60)) / 60000;
                			var sec = (((uptime % (60000 * 60 * 24)) % (60000 * 60)) % 60000) / 1000;
                			
                			if(runners[name] == null) {
	                			runners[name] = new google.maps.Marker({
									  map: map,
									  icon: 'http://ou-android.googlecode.com/svn/marathon.png',
	                        		  clickable: true
								});
								
								google.maps.event.addListener(runners[name], 'click', function() {
			                        info.setContent(this.getTitle());
			                        info.open(map, this);
			                    });
                			}
                			
                			runners[name].position = new google.maps.LatLng(latitude, longitude);
                			runners[name].title = "<h3>" + name + "</h3>il y a " + sprintf("%d jour(s), %d heure(s), %d minute(s), %d seconde(s)", day, hour, min, sec);
                			$(refresh).hide();
                		}
                	}
                },
                error: function() { $(refresh).hide();alert('boo error, try again !'); },
                headers: { 'Authorization': 'Deveryware Y291cnNlOl9rXShdd2ZjeCt4M2F0ej1tdHpdN11iNHxjb3Vyc2U6X2tdKF13ZmN4K3gzYXR6PW10el03XWI0' }
            });
    }
    
      $(document).ready(function() {
        map = new google.maps.Map(document.getElementById("map_canvas"), 
        {
          center: new google.maps.LatLng(48.833, 2.333), /* paris */
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        
        var georssLayer = new google.maps.KmlLayer('http://ou-android.googlecode.com/svn/semiparis.kml');
		georssLayer.setMap(map);
	    
	    $(refresh).hide();
	    fetchRunners();
	    setInterval("fetchRunners();", 10000 /* 10s */);
      });
        
    </script>
    <title>Marathon!</title>
  </head>
  <body>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  	<div id="refresh">refresh</div>
  </body>
</html>